<!--代码逻辑和样式库-->
<script src="./area-manage.component.js"></script>
<style src="./area-manage.scss" scoped lang="scss"></style>

<template>
  <div>
    <!-- 内容区域 -->
    <div class="dash-container">
      <!--部门树状表格 -->
      <el-row type="flex">
        <el-col :span="8" class="left-container">
          <el-table :data="data" row-key="text" border default-expand-all :show-header="false" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column prop="text" label="部门名称">
              <template slot-scope="scope">
                <el-link :class="{ 'selected-area': selectedData.value == scope.row.value }" :underline="false" @click="setSelectedArea(scope.row)">{{ scope.row.text }}</el-link>
                <el-link v-if="scope.row.parentVal != '0' && scope.row.isEnable == '0'" class="aq-margin-left-16" type="primary" @click="toggleAreaStatus(scope.row, '1')">启用</el-link>
                <el-link v-if="scope.row.parentVal != '0' && scope.row.isEnable == '1'" class="aq-margin-left-16" size="mini" type="danger" @click="toggleAreaStatus(scope.row, '0')">禁用</el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col class="right-container">
          <div id="map-container"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
